<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=1000,user-scalable=no" >
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <title>课件</title>
	<script type="text/javascript" src="../lib/js/vue.js" ></script>
  <link rel="stylesheet" href="../lib/css/common.css"/>
	<link rel="stylesheet" href="../lib/css/swiper.min.css"/>
  <link rel="stylesheet" href="../lib/css/css.css"/>
</head>
<body>
<div id="mainBody" class="main_body" v-cloak>
	<!-- S 头部 -->
	<common-head></common-head>
	<!-- E 头部 -->
	
	<!-- S 选择课件-->
	<div class="courseware_box">
		<div class="swiper-container swiper_courseware_box" >
			<div class="swiper-wrapper">
		    <div class="swiper-slide" v-for="(item,index) in listInfo.data" @click="clickClassItem(item.category_id)" :key="index">
					<div class="courseware_list">
						<img class="courseware_img" :src="item.image.file_path || ''" >
						<div class="courseware_name ellipsis">{{item.name || '无'}}</div>
					</div>
				</div>
			</div>
			<div class="swiper-button-next courseware_pagination_next"></div>
			<div class="swiper-button-prev courseware_pagination_prev"></div>
		</div>
	</div>
	<!-- E 选择课件-->
	
	<!-- S 选择小节 -->
	<div class="win_box" v-if="showBar">
		<div class="bar_box">
			<img class="close_icon"  @click="showBar=false" src="../lib/images/close_icon.png" >
			<div class="ov curr_bar_box">
				<button class="sub_btn fr" :disabled="!currentBar" @click="clickSelectBtn">确认选择</button>
				<div class="ellipsis bold f16">
					当前选择：
					<span class="main_color" v-if="currentBar">{{currentBar.parent_name}}——{{currentBar.name}}</span>
					<span class="main_color" v-else>暂未选择章节</span>
				</div>
			</div>
			<div class="bar_box_list scroll">
				<ul>
					<div v-for="(item,index) in chapterList" :key="index" >
						<li v-for="(bar,barIndex) in item.nodes" @click="clickBarList(bar,item.name)"  @dblclick="doubleClickBarList(bar,item.name)" :class="{'active':currentBar && currentBar.category_id==bar.category_id}" :key="barIndex">
							<div class="chapter_text">{{item.name}}</div>
							<div class="middle" style="width: 100%;height: 100%;">
								<div>
									<div class="bar_text f16 bold">{{bar.name.split('.')[0]}}</div>
									<div class="bar_text_name mt5 ellipsis">{{bar.name.split('.')[1] || ''}}</div>
								</div>
							</div>
						</li>
					</div>
				</ul>
			</div>
		</div>
	</div>
	
	<!-- E 选择小节 -->
	
</div>

<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/js/swiper.min.js"></script>
<script type="text/javascript" src="../lib/layer/layer.js"></script>
<script type="text/javascript" src="../lib/js/login.js" ></script>
<script type="text/javascript" src="../lib/js/js.js" ></script>
<script type="text/javascript" src="../lib/js/head.js" ></script>
<script type="text/javascript" >

var vm = new Vue({
	el: '#mainBody',
	data(){
		return{
			showBar:false,//显示小节
			swiperBanner:null,
			currentBar:null,
			listInfo:{//课程列表
				current_page:1,
				per_page:12,
				last_page:1,
				data:[],
				total:0
			},
			chapterList:[]//章节列表
		}
	},
	mounted(){
		this.initSwiper();
		this.getClassList()
	},
	methods: {
		//获取课程列表
		getClassList(){
			layer.load(0, {
				shade:[0.2,'#fff'],
			});
			$request({
				url:'/index.php?s=/api/lesson/lists/wxapp_id/10003',
				method:'post',
				data:{
					limits:this.listInfo.per_page,
					page:this.listInfo.current_page
				},
				success:(res)=>{
					layer.closeAll('loading');
					if (res.code != 1){
						window.location.href = "http://admin.zirantiancheng.com/index.php?s=/api/user/getqr/wxapp_id/10003"
					}
					if(this.listInfo.current_page==1){
						this.listInfo = {
							current_page:res.data.list.current_page,
							per_page:res.data.list.per_page,
							last_page:res.data.list.last_page,
							data:res.data.list.data,
							total:res.data.list.total,
						} 
					}else{
						this.listInfo = {
							current_page:res.data.list.current_page,
							per_page:res.data.list.per_page,
							last_page:res.data.list.last_page,
							data:this.listInfo.data.concat(res.data.list.data),
							total:res.data.list.total,
						} 
					}
				}
			})
		},
		//初始化swiper
		initSwiper(){
			this.swiperBanner = new Swiper('.swiper_courseware_box', {
				nextButton: '.courseware_pagination_next',
				prevButton: '.courseware_pagination_prev',
				slidesPerView: 3,
				observer:true,
				slidesPerColumn: 2,
				spaceBetween: 0,
				freeMode: true,
				autoplayDisableOnInteraction: false,
				onReachEnd:(swiper)=>{
					//滚动到最后一个
					if(this.listInfo.current_page <this.listInfo.last_page){
						this.listInfo.current_page++;
						this.getClassList();
					}
				},
				// onTap:(swiper,event)=>{
				// 	this.clickClassItem(swiper.clickedIndex)
				// }	
			});
		},
		//点击课程列表
		clickClassItem(id){
			this.showBar = true;
			this.currentBar = null;
			this.chapterList = [];
			this.getChapterList(id)
		},
		//获取章节列表
		getChapterList(id){
			layer.load(0, {
				shade:[0.2,'#fff'],
			});
			$request({
				url:'/index.php?s=/api/lesson/chapter/wxapp_id/10003',
				method:'post',
				data:{
					parent_id:id
				},
				success:(res)=>{
					layer.closeAll('loading');
					this.chapterList = res.data.list || []
				}
			})
		},
		//点击小节列表
		clickBarList(data,parentName){
			this.currentBar = {
				...data,
				parent_name:parentName
			}
		},
		//双击小节列表
		doubleClickBarList(data,parentName){
			this.clickBarList(data,parentName);
			this.clickSelectBtn()
		},
		//确认选择
		clickSelectBtn(){
			window.location.href = "course.html?category_id="+this.currentBar.category_id+"&name="+this.currentBar.parent_name+"——"+this.currentBar.name
		},
	}
});
  
</script>
</body>
</html>